<template>
  <div class="discount">
    <div class="discount-title">
      <div class="title">
        {{ $t('message.todaySpecial') }}
      </div>
    </div>
    <div class="discount-list">
      <swiper :options="swiperOption" ref="mySwiper" id="container">
        <!-- slides -->
        <swiper-slide class="ul" v-for="(item, index) in products" :key="index">
          <div class="li" v-for="(item1, index1) in item" :key="index1" :class="{ 'discount-no-right': index1 === 3, 'no-margin': index1 === 0, 'margin-left': index1 % 4 === 0, 'margin-right': (index1 + 1) % 4 === 0 }">
            <index-discount-item :product="item1"></index-discount-item>
          </div>
        </swiper-slide>
      </swiper>
      <!-- Optional controls -->
      <div class="swiper-button-prev btn" :class="{ 'btn-hover': prevHover }" @mouseenter="prevHandle" @mouseout="prevHandle"></div>
      <div class="swiper-button-next btn" :class="{ 'btn-hover': nextHover }" v-show="screenWidth > 1200" slot="button-next" @mouseenter="nextHandle" @mouseout="nextHandle"></div>
    </div>
  </div>
</template>

<script>
import IndexDiscountItem from '@/components/index/IndexDiscountItem'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'IndexDiscount',
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  components: {
    IndexDiscountItem,
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        autoplay: {
          disableOnInteraction: false,
          delay: 8000
        },
        speed: 800,
        simulateTouch: false, //禁止鼠标模拟
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      prevHover: false, // 上一幕 hover 启用
      nextHover: false, // 下一幕 hover 启用
      screenWidth: document.body.clientWidth
    }
  },
  methods: {
    prevHandle () {
      if (this.products.length > 1) {
        this.prevHover = !this.prevHover
      }
    },
    nextHandle () {
      if (this.products.length > 1) {
        this.nextHover = !this.nextHover
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    document.getElementById('container').addEventListener('mouseenter', function () {
      this.swiper.autoplay.stop() // mySwiper 为上面你swiper实例化的名称
    })
    document.getElementById('container').addEventListener('mouseleave', function () {
      this.swiper.autoplay.start() // mySwiper 为上面你swiper实例化的名称
    })
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth
    }
  }
}
</script>

<style scoped>
.discount {
  position: relative;
  width: 1200px;
  height: 437px;
  margin: 95px auto 0;
  border: 10px solid #FFD5B3;
  box-sizing: border-box;
}

.discount-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 1180px;
  height: 76px;
  line-height: 48px;
  font-size: 34px;
  color: #FF600A;
  text-align: center;
  letter-spacing: 0;
  font-weight: 600;
}

.title {
  position: absolute;
  top: -45px;
  left: 50%;
  width: 386px;
  height: 76px;
  line-height: 76px;
  background-color: #FFF8F5;
  transform: translateX(-50%);
}

.title:before {
  content: '';
  display: block;
  width: 436px;
  height: 54px;
  position: absolute;
  top: -33px;
  left: -293px;
  background: url('../../assets/images/index/左边飘絮.png') no-repeat;
}

.title:after {
  content: '';
  display: block;
  width: 468px;
  height: 132px;
  position: absolute;
  top: -50px;
  right: -381px;
  background: url('../../assets/images/index/右边飘絮.png') no-repeat;
}

.discount-list {
  position: relative;
  width: 1180px;
  height: 416px;
  margin-top: 56px;
  /* overflow: hidden; */
}

.discount-list .ul .margin-left {
  margin-left: 18px !important;
}

.discount-list .ul .margin-right {
  margin-right: 18px !important;
}

.discount-list .li {
  /* position: relative; */
  float: left;
  width: 276px;
  height: 350px;
  margin-left: 13px;
  box-sizing: border-box;
}

.discount-list .li.no-margin {
  margin: 0;
}

.swiper-button-prev {
  position: absolute;
  top: 160px;
  left: -80px;
  width: 60px;
  height: 60px;
  transform: rotate(180deg);
  transition: all .3s;
}

.swiper-button-next {
  position: absolute;
  top: 160px;
  right: -80px;
  width: 60px;
  height: 60px;
  transition: all .3s;
}


@media screen and (min-width: 1440px) {
  .swiper-button-prev {
    left: -100px;
  }

  .swiper-button-next {
    right: -100px;
  }
}

.btn {
  background-image: url('../../assets/images/index/切换btn.png');
  background-size: 60px 60px;
}

.btn-hover {
  background-image: url('../../assets/images/index/切换btn_hover.png');
}
/* 活动 */
.discount {
  border: 10px solid #FFCEDE;
}
.title {
  font-family: PingFangSC-Semibold;
  font-size: 34px;
  color: #FF6776;
  letter-spacing: 0;
  text-align: center;
}
</style>
